<div class="box">
    <div class="box-header with-border">
        <h3 class="box-title">物料列表</h3>
        <a ng-click="openDialog()" class="btn btn-primary btn-sm">新增</a>
    </div><!-- /.box-header -->
    <div class="box-body">
        <div class="col-md-3">
            <input type="text"
                   class="form-control"
                   ng-model="filters.name"
                   placeholder="物料名称"
                   aria-describedby="sizing-addon2">
        </div><!-- /.col-lg-6 -->
    </div>
    <div class="box-body table-responsive">
        <table ng-table="productTable" show-filter="false" class="table table-striped"
               ng-form="tableForm" admin-tracked-table="tableTracker">
            <tr ng-repeat="(index,product) in $data" ng-form="productForm" admin-tracked-table-row="product">
                <td width="150"
                    data-title="'#'"
                    ng-form="barcode">
                    <span class="editable-text" ng-bind="product.id"></span>
                </td>
                <td data-title="'物料名称'"
                    ng-switch="product.isEditing"
                    ng-form="name" admin-tracked-table-cell>
                    <span ng-switch-default class="editable-text" ng-bind="product.name"></span>
                    <div class="controls"
                         ng-class="{'has-error' : error.name, 'bg-warning': name.$invalid && name.$dirty}"
                         ng-switch-when="true">
                        <input type="text" name="name" ng-model="product.name" class="editable-input form-control"
                               required/>
                        <span ng-show="error.name" class="label label-danger" ng-bind="error.name"></span>
                    </div>
                </td>
                <td data-title="'分类'"
                    sortable="'category_id'"
                    ng-switch="product.isEditing"
                    ng-class="category_id.$dirty ? 'bg-warning' : ''">
                    <span ng-switch-default class="editable-text" ng-bind="product.category.name"></span>
                    <div class="controls"
                         ng-class="{'has-error' : error.category_id, 'bg-warning': category_id.$invalid && category_id.$dirty}"
                         ng-switch-when="true">
                        <label>
                            <select ng-options="item.id as item.name for item in categories"
                                    ng-model="product.category_id" class="editable-input form-control"
                                    required></select>
                        </label>
                        <span ng-show="error.category_id" class="label label-danger" ng-bind="error.category_id"></span>
                    </div>
                </td>
                <td width="175"
                    data-title="'物料单位'"
                    ng-switch="product.isEditing">
                    <span ng-switch-default class="editable-text" ng-bind="product.unit"></span>
                    <div class="controls"
                         ng-class="{'has-error' : error.unit, 'bg-warning': unit.$invalid && unit.$dirty}"
                         ng-switch-when="true">
                        <input type="text" name="unit" ng-model="product.unit" class="editable-input form-control"
                               required/>
                        <span ng-show="error.unit" class="label label-danger" ng-bind="error.unit"></span>
                    </div>
                </td>
                <td data-title="'日期'">
                    添加日期: {{product.created_at}}<br>
                    最后修改: {{product.updated_at}}
                </td>
                <td data-title="'备注'">
                    <span ng-if="product.note">{{product.note}}</span>
                    <span ng-if="product.note === ''">无</span>
                </td>
                <td width="100" data-title="'编辑'">
                    <button class="btn btn-primary btn-sm"
                            ng-click="saveProduct(product, productForm)"
                            title="保存"
                            data-toggle="tooltip"
                            ng-if="product.isEditing"
                            ng-disabled="(productForm.$pristine && !product.images_changed) || (productForm.$invalid && !product.images_changed)">
                        <span class="glyphicon glyphicon-ok"></span>
                    </button>
                    <button class="btn btn-default btn-sm"
                            ng-click="cancelEdit(product, productForm)"
                            title="取消"
                            data-toggle="tooltip"
                            ng-if="product.isEditing">
                        <span class="glyphicon glyphicon-remove"></span>
                    </button>
                    <button class="btn btn-default btn-sm"
                            ng-click="editProduct(product)"
                            title="编辑"
                            data-toggle="tooltip"
                            ng-if="!product.isEditing">
                        <span class="glyphicon glyphicon-pencil"></span>
                    </button>
                </td>
            </tr>
            <tr ng-show="!$data.length">
                <td colspan="10" class="text-center">暂无物料</td>
            </tr>
        </table>
    </div><!-- /.box-body -->
    <div class="overlay" ng-show="productTable.settings().$loading">
        <i class="fa fa-refresh fa-spin"></i>
    </div>
</div>
